<!-- 编辑弹窗 -->
<template>
	<el-dialog width="750px" :visible="visible" :lock-scroll="false" :destroy-on-close="true"
		custom-class="ele-dialog-form" :title="isUpdate?'修改菜单':'添加菜单'" @update:visible="updateVisible">
		<el-form ref="form" :model="form" :rules="rules" label-width="92px" @keyup.enter.native="save"
			@submit.native.prevent>
			<el-row :gutter="15">
				<el-col :sm="12">
					<el-form-item label="上级菜单:">
						<treeselect :options="menuList" v-model="form.pid" :defaultExpandLevel="3"
							:normalizer="normalizer" placeholder="请选择上级菜单" />
					</el-form-item>
					<el-form-item label="菜单名称:" prop="title">
						<el-input clearable v-model="form.title" placeholder="请输入菜单名称" />
					</el-form-item>
				</el-col>
				<el-col :sm="12">
					<el-form-item label="菜单类型:">
						<el-radio-group v-model="form.type" @change="onMenuTypeChange">
							<el-radio :label="0">菜单</el-radio>
							<el-radio :label="1">按钮</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="打开方式:">
						<el-radio-group v-model="form.target" :disabled="form.type === 1" @change="onTargetChange">
							<el-radio :label="0">组件</el-radio>
							<el-radio :label="1">内链</el-radio>
							<el-radio :label="2">外链</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<div style="margin: 6px 0 28px 0;">
				<el-divider />
			</div>
			<el-row :gutter="15">
				<el-col :sm="12">
					<el-form-item label="菜单图标:">
						<ele-icon-picker v-model="form.icon" placeholder="请选择菜单图标" :disabled="form.type===1" />
					</el-form-item>
					<el-form-item name="path">
						<template slot="label">
							<el-tooltip v-if="form.target === 2" placement="top"
								content="需要以`http://`、`https://`、`//`开头">
								<i class="el-icon-_question"></i>
							</el-tooltip>
							<span>{{ form.target === 2 ? ' 外链地址:' : ' 路由地址:' }}</span>
						</template>
						<el-input clearable v-model="form.path" :disabled="form.type===1"
							:placeholder="form.target === 2 ? '请输入外链地址' : '请输入路由地址'" />
					</el-form-item>
					<el-form-item name="component">
						<template slot="label">
							<el-tooltip v-if="form.target === 1" placement="top"
								content="需要以`http://`、`https://`、`//`开头">
								<i class="el-icon-_question"></i>
							</el-tooltip>
							<span>{{ form.target === 1 ? ' 内链地址:' : ' 组件路径:' }}</span>
						</template>
						<el-input clearable v-model="form.component" :disabled="form.type === 1 || form.target === 2"
							:placeholder="form.target === 1 ? '请输入内链地址' : '请输入组件路径'" />
					</el-form-item>
					<el-form-item label="状态:">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">在用</el-radio>
							<el-radio :label="2">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :sm="12">
					<el-form-item label="权限标识:">
						<el-input clearable v-model="form.permission" placeholder="请输入权限标识"
							:disabled="form.type === 0" />
					</el-form-item>
					<el-form-item label="排序号:" prop="sort">
						<el-input-number :min="0" v-model="form.sort" placeholder="请输入排序号" controls-position="right"
							class="ele-fluid ele-text-left" />
					</el-form-item>
					<el-form-item label="是否可见:">
						<el-radio-group v-model="form.hide" :disabled="form.type === 1">
							<el-radio :label="0">显示</el-radio>
							<el-radio :label="1">隐藏</el-radio>
						</el-radio-group>
						<el-tooltip placement="top" content="选择不可见只注册路由不显示在侧边栏，比如添加页面应该选择不可见">
							<i class="el-icon-_question" style="vertical-align: middle;margin-left: 8px;"></i>
						</el-tooltip>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="权限节点:" v-if="form.type==0">
				<el-transfer v-model="form.checkedList" :data="permissionList" :titles="['全部节点', '已赋予节点']">
				</el-transfer>
			</el-form-item>
			<el-form-item label="备注:">
				<el-input :rows="3" clearable type="textarea" :maxlength="200" v-model="form.note"
					placeholder="请输入备注" />
			</el-form-item>
		</el-form>
		<div slot="footer">
			<el-button @click="updateVisible(false)">取消</el-button>
			<el-button type="primary" :loading="loading" @click="save">保存
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import Treeselect from '@riophae/vue-treeselect';
	import '@riophae/vue-treeselect/dist/vue-treeselect.css';
	import EleIconPicker from 'ele-admin/packages/ele-icon-picker';

	export default {
		name: 'MenuEdit',
		components: {
			EleIconPicker,
			Treeselect
		},
		props: {
			// 弹窗是否打开
			visible: Boolean,
			// 修改回显的数据
			data: Object,
			// 全部菜单数据
			menuList: Array
		},
		data() {
			return {
				// 表单数据
				form: this.initFormData(this.data),
				// 表单验证规则
				rules: {
					title: [{
						required: true,
						message: '请输入菜单名称',
						trigger: 'blur'
					}],
					sort: [{
						required: true,
						message: '请输入排序号',
						trigger: 'blur'
					}]
				},
				// 提交状态
				loading: false,
				// 是否是修改
				isUpdate: false,
				permissionList: [{
						key: 1,
						label: `查询`,
					},
					{
						key: 5,
						label: `添加`,
					},
					{
						key: 10,
						label: `修改`,
					},
					{
						key: 15,
						label: `删除`,
					},
					{
						key: 20,
						label: `详情`,
					},
					{
						key: 25,
						label: `状态`,
					},
					{
						key: 30,
						label: `批量删除`,
					},
					{
						key: 35,
						label: `添加子级`,
					},
					{
						key: 40,
						label: `全部展开`,
					},
					{
						key: 45,
						label: `全部折叠`,
					},
					{
						key: 50,
						label: `导出数据`,
					},
					{
						key: 55,
						label: `导入数据`,
					},
					{
						key: 60,
						label: `分配权限`,
					},
					{
						key: 65,
						label: `重置密码`,
					}
				],
			};
		},
		watch: {
			data() {
				this.isUpdate = !!(this.data && this.data.id);
				this.form = this.initFormData(this.data);
			}
		},
		methods: {
			/* 下拉树格式化 */
			normalizer(d) {
				return {
					id: d.id,
					label: d.title,
					children: d.children || undefined
				};
			},
			/* 保存编辑 */
			save() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.loading = true;
						// this.$http.post('/menu/edit',
						this.$http.post('/back/auth/rule/edit',
							Object.assign({}, this.form, {
								parent_id: this.form.pid || 0,
								target: this.form.target === 2 ? "_blank" : "_self"
							})
						).then(res => {
							this.loading = false;
							if (res.data.code === 1) {
								this.$message.success(res.data.msg);
								this.updateVisible(false);
								this.$emit('done');
							} else {
								this.$message.error(res.data.msg);
							}
						}).catch(e => {
							this.loading = false;
							this.$message.error(e.message);
						});
					} else {
						return false;
					}
				});
			},
			/* 更新visible */
			updateVisible(value) {
				this.$emit('update:visible', value);
			},
			/* type选择改变 */
			onMenuTypeChange() {
				if (this.form.type === 0) {
					this.form.permission = null;
				} else {
					this.form.target = 0;
					this.form.icon = null;
					this.form.path = null;
					this.form.component = null;
					this.form.hide = true;
				}
			},
			/* target选择改变 */
			onTargetChange() {
				if (this.form.target === 2) {
					this.form.component = null;
				}
			},
			/* 初始化form数据 */
			initFormData(data) {
				let form = {
					type: 0,
					target: 1,
					hide: 1,
					status: 1,
				};
				if (data) {
					let target = 0;
					if (this.isUrl(data.path)) {
						target = 2;
					} else if (this.isUrl(data.component)) {
						target = 1;
					}
					Object.assign(form, data, {
						pid: data.pid === 0 ? null : data.pid,
						target: target
					});
				}
				return form;
			},
			/* 判断是否是网址 */
			isUrl(url) {
				return url && (
					url.startsWith('http://') ||
					url.startsWith('https://') ||
					url.startsWith('://'));
			}
		}
	}
</script>

<style scoped>
</style>
